$(() => {
    // 进行cookie验证
    let isLogin = QF.getCookie("islogin");
    console.log(isLogin)
    if (!isLogin) {
        // 无缓存,就传送地址到登陆页面
        location.href = "./login.html"
        return;
    }

    $('#page').page({
        leng: 36, //分页总数
        activeClass: 'activP', //active 类样式定义
        clickBack: function (page) {
            console.log(page)
            getPage(page - 1);
            //调用AJAX
            localStorage.setItem("page", page - 1)
            // 储存到本地缓存
            //AJAX无法改变历史记录,所以后退会回退到上一个页面  而不是上一个操作
            //当你点击某一个页码的时候,我们要改变历史记录
            // console.log(page)
            history.pushState({ page: page - 1 }, "", "#" + (page))
            //给网站添加和修改历史记录
            // history.pushState方法接受三个参数，依次为：
            //??? state：一个与指定网址相关的状态对象，popstate事件触发时，该对象会传入回调函数。如果不需要这个对象，此处可以填null。
            // title：新页面的标题，但是所有浏览器目前都忽略这个值，因此这里可以填null。
            // url：新的网址，必须与当前页面处在同一个域。浏览器的地址栏将显示这个网址。
            console.log("29" + { page: page - 1 })
        }
    })

    //当历史记录发生变化时,执行window.onpopstate
    window.onpopstate = function (e) {
        console.log("历史记录变化了")
        //在这里发送AJAX
        console.log("监控浏览器回退变化" + e.state.page);
        getPage(e.state.page);
        //e是个事件对象,在后退时会出现一个对象PopStateEvent;
        //历史记录发生变化时,会调用请求AJAX(回退之时,响应)
        localStorage.setItem("page", e.state.page);
        //将历史记录变化时的页码存入本地存储
        updateIdx()
        // 调用页码样式切换
    }
    let shoppingList = [];
    console.log(history);

    //发送请求我们要在分页的指引之下发送,所以,我们将他封装成函数
    let getPage = (page) => {
        //  发送请求
        $.ajax({
            url: "/php/getGoodsInfo.php",
            // 发送请求到获取商品信息的php;;
            data: {
                page,
                count: 20
            },
            //发送请求page和20条信息
            type: "get",
            dataType: "json",
            success({ err, data }) {
                console.log(data);//从数据库讨回来的数据
                //根据那二十个数据生成二十个div 
                //map会有一个返回值
                shoppingList = data;
                //将二十个数据传送给shoppingList,来让下面加入购物车时将,shoppingLIst信息导入
                let arr = data.map(value => {
                    return `  <div class="col-lg-3">
                    <div class="panel panel-default">
                        <div class="panel-heading">${value.cat_one_id}</div>
                        <div class="panel-body">
                            <img  class="img-responsive" src="${value.goods_big_logo}" alt="..." class="img-rounded">
                            <p class="desc"><a href="./detail.html#${value.goods_id}">${value.goods_name}</a></p>
                            <div  class="add-to-cart" ><span>￥${value.goods_price} </span>   <button type="button" data-id="${value.goods_id}" class="btn btn-primary">加入购物车</button></div>
                        </div>
                    </div>
                </div>`
                });
                //a标签链接到的是href="./detail.html#${value.goods_id}"


                //$("#list").html(arr.join(""))相当于用空格拼接div,并且输入#list的html下
                let $listContent = $(arr.join(""))
                //创建元素
                //$函数1.选择元素 ,2.把原生元素转成jQuery; 3.创建元素; 4.推迟代码执行
                let $imgs = $listContent.find("img");
                //查找这里面的所有图片元素
                let count = 0;
                $imgs.on("load", function () {
                    // 图片加载完毕之后;
                    console.log("图片加载完毕")
                    count++;
                    if (count === $imgs.length) {
                        //如果全部加载完毕
                        $("#list").empty().append($listContent);
                        //先调用empty(清空,不然就成瀑布流了)
                        //那我我就让这些元素上树(保证了同时上树)
                    }
                })
            }
        })
    }
    let page = JSON.parse(localStorage.getItem("page")) || 0
    //将JSON格式转换为真正的对象 获取了储存的页面号
    // let $as = $("#page").find("li>a")
    // console.log($as)
    console.log("page" + page)
    //updateIdx();
    //调用页码样式切换
    function updateIdx() {
        let page = JSON.parse(localStorage.getItem("page")) || 0
        $("#page").find("li>a").each(function (index, value) {
            console.log(page, $(value).html());
            // 定义页码页,寻找li标签下的a标签,each迭代器,用于输出数组之中所有下标和value;
            if ($(value).html() === page + 1 + "") {
                //li下面的a标签之中是字符串页码,假如这个页码和实际页码相等,那么;就加入类样式定义,即切换页码
                $(value).addClass("activP")
            } else {
                $(value).removeClass("activP")
                //如果页码和真实页码不相符,就删除类样式定义;针对第一个页码默认添加样式而设置
                //ajax不更改页面,回退直接来到请求ajax之前
            }
        })//这段是翻页时让页码匹配
    }

    getPage(page)
    //获取page
    history.replaceState({ page: page }, "", "#" + (page + 1))
    //替换page;避免回退时历史记录没有而产生bug

    //我们可以先把id存到本地存储中,进入详情页,之后才将id从本地存储之中取出,再通过id发送请求;
    //两个页面之中传递信息,我们要么用Cookie,要么用本地存储;

    //委托模式加入购物车(选择#list是因为他不跟随页面进行改变)
    $("#list").on("click", "button", function () {
        //获取本地存储信息
        let shoppingArr = JSON.parse(localStorage.getItem("shoppingCart")) || [];//如果第一个获取不到,就获取一个空的
        console.log(shoppingArr)//购物车里的所有信息
        let id = $(this).attr("data-id");  //获取指定的html属性值:attr(name);;也可以data("id")来获取
        console.log($(this));
        console.log($(this).attr("data-id"));
    console.log(id);//id值
    //查找购物车数组之中是否存在id相同的信息
    let shoppingInfo = shoppingArr.find(value => value.goods_id === id);
    console.log( shoppingInfo);
    if (shoppingInfo) {
        shoppingInfo.num++;
    }else{
        let info = shoppingList.find(value => value.goods_id === id);
        info.num = 1;
        shoppingArr.push(info);
    }
console.log(shoppingArr);
    localStorage.setItem("shoppingCart", JSON.stringify(shoppingArr));
    //将本地存储之中的购物车放回去
    })
    

})